---
sidebar_position: 5
---

# DynamicColorIOS

`DynamicColorIOS` is a workletized version of a React Native's [`DynamicColorIOS`](https://reactnative.dev/docs/dynamiccolorios), designed to be used within Reanimated. It's a way to define colors that automatically adapt to light and dark mode on iOS.

## Reference

```tsx
import { DynamicColorIOS } from 'react-native-reanimated';

function Example() {
  const progress = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    // ...

    return {
      // highlight-start
      backgroundColor: DynamicColorIOS({
        light: lightColor,
        dark: darkColor,
      }),
      // highlight-end
    };
  });
}
```

<details>
<summary>Type definitions</summary>

```typescript
function DynamicColorIOS(
  {
    light: ColorValue,
    dark: ColorValue,
    highContrastLight?: ColorValue,
    highContrastDark?: ColorValue
  }
): DynamicColorValue;

type DynamicColorValue = {
  dynamic: {
    light: ColorValue,
    dark: ColorValue,
    highContrastLight?: ColorValue,
    highContrastDark?: ColorValue
  },
}
```

</details>

### Arguments

#### `tuple`

An object with two mandatory keys: `light` and `dark`, and two optional keys: `highContrastLight` and `highContrastDark`.

### Returns

An object containing a `dynamic` field, which holds the injected color values.

### Example

import DynamicColorIOSExample from '@site/src/examples/DynamicColorIOSExample';
import DynamicColorIOSExampleSrc from '!!raw-loader!@site/src/examples/DynamicColorIOSExample';

<CollapsibleCode src={DynamicColorIOSExampleSrc} showLines={[22, 45]} />

## Platform compatibility

<PlatformCompatibility ios />
